<template>
  <div class="group_8" style="overflow:auto;">
    <div class="section_5 flex-row justify-between" v-for="item in resData" :key="item.id">
      <div class="section_6 flex-col">
        <span class="text_23">进行中的项目</span>
        <div class="box_6 flex-row">
          <div class="text-group_1 flex-col justify-between">
            <span class="text_24">项目名称</span>
            <span class="text_25">{{ item.projectName }}</span>
          </div>
          <div class="text-wrapper_13 flex-col justify-between">
            <span class="text_26">状态</span>
            <span class="text_27">{{ item.statusName }}</span>
          </div>
          <div class="text-wrapper_13 flex-col justify-between">
            <span class="text_26">组织单位</span>
            <span class="text_27">{{ item.investorName }}</span>
          </div>
          <div class="text-wrapper_14 flex-col justify-between">
            <span class="text_28">评审申报时间</span>
            <span class="text_29">{{ item.createTime }}</span>
          </div>
          <div class="text-wrapper_15 flex-col justify-between">
            <span class="text_30">参会专家</span>
            <span class="text_31">
<!--              v-for="user in item.expertName"-->
              <div class="text-wrapper_25 flex-col" >
                <span class="text_47">暂无专家</span>
              </div>
            </span>
          </div>
        </div>
        <div class="process-list">
          <div class="process-text">进度</div>
          <div class="process-status-list f-r a-c">
            <div :class="['process-status', status.active+1 ? 'active' : '']" :style="{ left: `calc(${(sIndex + 1) * 25}% - 100px)`}" v-for="(status,sIndex) in item.statusList">
              {{ status.name }} {{ `calc(${(sIndex + 1) * 25}%-50px)` }}
            </div>
          </div>
          <div class="process-bar">
            <div class="process-bar-on" :style="{ width: (item.otherstatus- 2 ) * 25 +'%' }"></div>
          </div>
          <div class="process-status-list2 f-r a-c">
            <div :class="['process-status2', status.active ? 'active' : '']" :style="{ left: `calc(${(sIndex + 1) * 25}% - 100px)`}" v-for="(status,sIndex) in item.statusList">
              {{ item[status.timeKey]}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {http} from "@/api";
import { getName, Investor, ProjectStatus } from "@/dict";

export default {
  data() {
    return {
      constants: {},
      resData: []
    }
  },
  created() {
    http.home.project().then(res => {
      this.resData = res.data.map(el => {
        return {
          ...el,
          statusName:getName(el.status, ProjectStatus),
          investorName: getName(el.investor, Investor),
          statusPercent: '350px',
          otherstatus: el.status == 2 ? 3 : el.status,
          statusList: [
            {
              name: '新建项目',
              active: el.status >= 2,
              status: el.status + 3,
              timeKey: 'createTime'
            },
            {
              name: '会议组织中',
              active: el.status >= 4,
              status: el.status,
              timeKey: 'orginTime'
            },
            {
              name: '会中评审',
              active: el.status >= 5,
              status: el.status,
              timeKey: 'reviewTime'

            },
            {
              name: '项目结束',
              active: el.status === 6,
              status: el.status,
              timeKey: 'endTime'

            }
          ]
        }
      })
    })
  },
  methods: {
    getP(item) {}
  }
}
</script>
<style lang="scss">
@import "./index.scss";
.process-list {
  width: 100%;
  position: relative;
  margin-top: 28px;
  .process-text {
    position: absolute;
    left: 20px;
    top: 5px;
    width: 28px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(113, 117, 121, 1);
    font-size: 14px;
    font-family: SourceHanSansCN-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }
  .process-status-list {
    padding-top: 40px;
    .process-status {
      height: 30px;
      background-image: url('~@/assets/process-status.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100px;
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      font-family: SourceHanSansCN-Bold;
      font-weight: 700;
      text-align: center;
      position: absolute;
      bottom: 20px;
      &.active {
          background-image: url('~@/assets/process-status-active.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
    }

  }
  .process-status-list2 {
    position: relative;
    .process-status2 {
      height: 30px;
      width: 125px;
      font-size: 14px;
      font-family: SourceHanSansCN-Bold;
      font-weight: 700;
      text-align: center;
      position: absolute;
      top: 5px;
    }
  }
  .process-bar {
    background-color: #eeeeee;
    border-radius: 8px 8px 9px 9px;
    height: 18px;
    margin: 0 22px;
    position: relative;
    .process-bar-on {
      position: absolute;
      left: 0;
      z-index: 2;
      top: 0;
      background-image: linear-gradient(90deg, #2251f8 0, #2251f8 0, #728ff7 100%, #728ff7 100%);
      border-radius: 9px;
      height: 100%;
    }
  }
}
</style>
